<template>
  <view class="about-container">
    <!-- 顶部店铺信息卡片 -->
    <view class="store-card">
      <image
        class="store-bg"
        src="/static/images/about/bg.jpg"
        mode="aspectFill"
      ></image>
      <view class="store-info">
        <image
          class="store-logo"
          src="/static/images/about/logo.png"
          mode="aspectFill"
        ></image>
        <view class="store-name">{{ shopInfo.shopAcronym }}</view>
        <view class="store-desc">用心制作每一个蛋糕</view>
      </view>
    </view>

    <!-- 联系信息列表 -->
    <view class="info-section">
      <view class="section-title">基本信息</view>
      <view class="info-list">
        <view class="info-item" @tap="makePhoneCall">
          <view class="item-left">
            <image src="/static/images/about/phone.png"></image>
            <text>联系电话</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
        <view class="info-item" @tap="showWechatQrcode">
          <view class="item-left">
            <image src="/static/images/about/wechat.png"></image>
            <text>客服微信</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
        <view class="info-item" @tap="openLocation">
          <view class="item-left">
            <image src="/static/images/about/address.png"></image>
            <text>店铺地址</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
        <view class="info-item">
          <view class="item-left">
            <image src="/static/images/about/time.png"></image>
            <text>营业时间</text>
          </view>
          <view class="item-right">
            <text class="value">{{ shopInfo.businessHours }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 其他信息 -->
    <view class="info-section">
      <view class="section-title">更多服务</view>
      <view class="info-list">
        <view class="info-item" @tap="goToMyOrders">
          <view class="item-left">
            <image src="/static/images/about/order.png"></image>
            <text>我的订单</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
        <view class="info-item" @tap="goToCouponCenter">
          <view class="item-left">
            <image src="/static/images/about/coupon.png"></image>
            <text>优惠券中心</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
        <view class="info-item" @tap="goToMyCoupons">
          <view class="item-left">
            <image src="/static/images/about/my-coupon.png"></image>
            <text>我的优惠券</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
        <view class="info-item" @tap="manageAddress">
          <view class="item-left">
            <image src="/static/images/about/manage.png"></image>
            <text>地址管理</text>
          </view>
          <view class="item-right">
            <u-icon name="arrow-right" size="16" color="#000"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部版权信息 -->
    <view class="footer">
      <view class="version">版本号：1.0.0</view>
      <view class="copyright">Copyright © 2024 西麦尔蛋糕店</view>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapGetters({
      shopInfo: 'shop/shopInfo'
    })
  },
  onLoad() {
    this.fetchShopInfo()
  },
  onPullDownRefresh() {
    this.refreshShopInfo().then(() => {
      uni.stopPullDownRefresh()
    })
  },
  methods: {
    ...mapActions({
      fetchShopInfo: 'shop/getShopInfo',
      refreshShopInfo: 'shop/refreshShopInfo'
    }),
    
    // 前往我的订单
    goToMyOrders() {
      uni.navigateTo({
        url: '/pages/order/index'
      })
    },
    
    // 拨打电话
    makePhoneCall() {
      if (!this.shopInfo.phone) return
      uni.makePhoneCall({
        phoneNumber: this.shopInfo.phone
      })
    },
    // 打开地图
    openLocation() {
      if (!this.shopInfo.latitude || !this.shopInfo.longitude) return
      uni.openLocation({
        latitude: parseFloat(this.shopInfo.latitude),
        longitude: parseFloat(this.shopInfo.longitude),
        name: this.shopInfo.name,
        address: this.shopInfo.address,
        scale: 18
      })
    },
    // 显示微信二维码
    showWechatQrcode() {
      if (!this.shopInfo.qrcode) return
      uni.previewImage({
        urls: [this.shopInfo.qrcode]
      })
    },
    // 地址管理
    manageAddress() {
      uni.navigateTo({
        url: '/pages/addresses/index'
      })
    },
    // 前往优惠券中心
    goToCouponCenter() {
      uni.navigateTo({
        url: '/pages/coupon/center'
      })
    },
    // 前往我的优惠券
    goToMyCoupons() {
      uni.navigateTo({
        url: '/pages/coupon/user'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/common/theme.scss';

.about-container {
  min-height: 100vh;
  background: $bg-main;
  padding-bottom: env(safe-area-inset-bottom);
}

.store-card {
  position: relative;
  height: 400rpx;
  overflow: hidden;

  .store-bg {
    width: 100%;
    height: 100%;
    filter: brightness(0.8);
  }

  .store-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40rpx;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    flex-direction: column;
    align-items: center;

    .store-logo {
      width: 160rpx;
      height: 160rpx;
      border-radius: 80rpx;
      border: 4rpx solid $bg-white;
      margin-bottom: 20rpx;
    }

    .store-name {
      font-size: 36rpx;
      color: $bg-white;
      font-weight: 600;
      margin-bottom: 8rpx;
    }

    .store-desc {
      font-size: 26rpx;
      color: rgba($bg-white, 0.8);
    }
  }
}

.info-section {
  margin: 30rpx 24rpx;
  background: $bg-white;
  border-radius: 24rpx;
  padding: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba($primary-pink, 0.05);

  .section-title {
    font-size: 30rpx;
    color: $primary-dark-pink;
    font-weight: 600;
    margin-bottom: 20rpx;
    padding: 0 10rpx;
  }

  .info-list {
    .info-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 24rpx 10rpx;
      border-bottom: 1rpx solid rgba($primary-pink, 0.08);
      background: $bg-white;

      &:last-child {
        border-bottom: none;
      }

      .item-left {
        display: flex;
        align-items: center;

        image {
          width: 40rpx;
          height: 40rpx;
          margin-right: 20rpx;
        }

        text {
          font-size: 28rpx;
          color: $primary-dark-pink;
        }
      }

      .item-right {
        display: flex;
        align-items: center;

        .value {
          font-size: 26rpx;
          color: $primary-light-pink;
          margin-right: 10rpx;
        }

        .icon-right {
          color: rgba($primary-light-pink, 0.6);
          font-size: 24rpx;
        }
      }
    }

    button.info-item {
      width: 100%;
      padding: 24rpx 10rpx;
      border: none;
      border-radius: 0;
      text-align: left;
      line-height: inherit;

      &::after {
        display: none;
      }
    }
  }
}

.footer {
  padding: 60rpx 0;
  text-align: center;

  .version {
    font-size: 24rpx;
    color: rgba($primary-light-pink, 0.6);
    margin-bottom: 8rpx;
  }

  .copyright {
    font-size: 24rpx;
    color: rgba($primary-light-pink, 0.6);
  }
}
</style>
